<template>
    <div class="app-container">
        <el-table
            :data="switchInfoList"
            stripe
            style="width: 100%">
            <el-table-column
                prop="name"
                label="接口"
                width="180">
            </el-table-column>
            <el-table-column
                prop="hw_addr"
                label="MAC地址"
                width="180">
            </el-table-column>
            <el-table-column
                prop="rx_bytes"
                label="接收字节"
                width="180">
            </el-table-column>
            <el-table-column
                prop="tx_bytes"
                label="传输字节">
            </el-table-column>
            <el-table-column
                prop="rx_dropped"
                label="RX 丢弃量">
            </el-table-column>
            <el-table-column
                prop="tx_dropped"
                label="TX 丢弃量">
            </el-table-column>
            <el-table-column
                prop="collisions"
                label="碰撞">
            </el-table-column>
            <el-table-column
                prop="duration_sec"
                label="活动时间（秒）">
            </el-table-column>
            
        </el-table>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "switchInfo",
    data() {
        return {
            dpid: 0,
            switchInfoList: [], // 新增这个属性来保存端口信息
            previousDpid: null // 用于存储前一次的 dpid
        };
    },
    async created() {
        this.dpid = this.$route.query.dpid;
        if (!this.previousDpid || this.previousDpid !== this.dpid) {
            await this.fetchSwitchInfo();
        }
    },
    watch: {
        '$route.query.dpid': {
            immediate: true,
            handler(newDpid) {
                if (newDpid && newDpid !== this.previousDpid) {
                    this.previousDpid = newDpid;
                    this.dpid = newDpid;
                    this.fetchSwitchInfo();
                }
            }
        }
    },
    methods: {
        async fetchSwitchInfo() {
            try {
                const [portResponse, portDescResponse] = await Promise.all([
                    axios.get('/ryu/stats/port/' + this.dpid, {
                        headers: {
                            'Access-Control-Allow-Origin': '*'
                        }
                    }),
                    axios.get('/ryu/stats/portdesc/' + this.dpid, {
                        headers: {
                            'Access-Control-Allow-Origin': '*'
                        }
                    })
                ]);

                // 处理端口统计数据
                const portData = Object.values(portResponse.data).flat();
                this.switchInfoList = portData;
                console.log('Initial Switch Info List:', this.switchInfoList);

                // 处理端口描述数据
                const portDescData = Object.values(portDescResponse.data).flat();

                // 合并数据
                portDescData.forEach(rsData => {
                    const existingPort = this.switchInfoList.find(item => item.port_no === rsData.port_no);
                    if (existingPort) {
                        // 合并 rsData 的属性到 existingPort 中
                        existingPort.hw_addr = rsData.hw_addr;
                        existingPort.name = rsData.name;
                        existingPort.config = rsData.config;
                        existingPort.state = rsData.state;
                        existingPort.curr = rsData.curr;
                        existingPort.advertised = rsData.advertised;
                        existingPort.supported = rsData.supported;
                        existingPort.peer = rsData.peer;
                        existingPort.curr_speed = rsData.curr_speed;
                        existingPort.max_speed = rsData.max_speed;
                    } else {
                        // 如果没有找到对应的端口，则直接将 rsData 添加到列表中
                        this.switchInfoList.push(rsData);
                    }
                });

                console.log('Updated Switch Info List:', this.switchInfoList);
            } catch (error) {
                console.error(error);
            }
        }
    }
};
</script>

<style scoped>
.app-container {
    font-family: Arial, sans-serif;
}
pre {
    white-space: pre-wrap; /* 保留换行符并允许文本换行 */
}
</style>